<template>
  <blockquote :style="borderColor">
    <div class="title" v-if="title">{{ title }}</div>
    <slot></slot>
  </blockquote>
</template>

<script>
export default {
  props: {
    types: {
      type: String,
      default: '#98cbff'
    },
    title: {
      type: String
    }
  },
  computed: {
    borderColor() {
      let color = this.types
      return {
        borderLeft: `5px solid ${color}`
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  blockquote
    position relative
    margin 10px 0
    padding 15px 16px
    border 1px solid #DCDFE6
    border-right none
    border-radius 0 2px 2px 0
    .title
      position absolute
      top -10px
      left 5px
      background-color #FFF
      padding 0 20px
      font-weight 500
      color #303133;
      font-size 15px
</style>
